<template>
  <div :class="wrpCls" style="margin-right: 16px">
    <a-space size="middle">
      <a-input-search
        placeholder="输入电话号码查询"
        style="width: 250px"
        @search="handlefindCustomerByPhone"
        allow-clear
      />
      <!-- {{ company }} -->
      <a-tooltip v-if="userType === '1' && onLine">
        <template slot="title"> APP在线 </template>
        <a-icon
          type="wechat"
          @click="toConsole"
          :style="{ fontSize: '22px' }"
        />
      </a-tooltip>
      <!-- <a-tooltip @click="toNotice" style="cursor: pointer">
        <template slot="title"> 消息 </template>
        <a-badge :count="msgCount" dot>
          <a-icon type="sound" :style="{ fontSize: '18px' }" />
        </a-badge>
      </a-tooltip> -->
      <!-- <a-tooltip>
        <template slot="title"> 换肤 </template>
        <a-icon
          type="setting"
          @click="showColorSetting()"
          :style="{ fontSize: '18px' }"
        />
      </a-tooltip> -->
      <a-tooltip>
        <template slot="title">
          {{ fullScreen ? "退出全屏" : "切为全屏" }}
        </template>
        <a-icon
          :type="fullScreen ? 'fullscreen-exit' : 'fullscreen'"
          @click="toggleFullScreen"
          :style="{ fontSize: '18px' }"
        />
      </a-tooltip>
      <avatar-dropdown
        :menu="showMenu"
        :current-user="currentUser"
        :class="prefixCls"
      />
      <!-- 暂只支持中文，国际化可自行扩展 -->
      <!-- <select-lang :class="prefixCls" /> -->
    </a-space>
    <platform-version
      v-if="modalVisible"
      ref="platformVersionModal"
      @close="modalVisible = false"
    />
    <a-modal
      title="客户信息"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
      width="320px"
      v-if="visible"
    >
      <a-descriptions :title="customer.cusName" :column="1" layout="horizontal">
        <a-descriptions-item label="电话">
          {{ customer.phone }}
        </a-descriptions-item>
        <a-descriptions-item label="客户来源">
          {{ customer.laiyuan }}
        </a-descriptions-item>
        <a-descriptions-item label="客户经理">
          {{ customer.userName }}
        </a-descriptions-item>
        <a-descriptions-item label="客户位置">
          <span v-if="customer.status == '-1'">线索池</span>
          <span v-if="customer.status == '0'">我的客户</span>
          <span v-if="customer.status == '77'">成交客户</span>
          <span v-if="customer.status == '7'">公海客户</span>
          <span v-if="customer.status == '-3'">黑名单客户</span>
        </a-descriptions-item>
        <a-descriptions-item label="创建时间">
          {{ customer.createTime }}
        </a-descriptions-item>
        <a-descriptions-item label="备注">
          {{ customer.remark }}
        </a-descriptions-item>
      </a-descriptions>
    </a-modal>
  </div>
</template>

<script>
import AvatarDropdown from "./AvatarDropdown";
import PlatformVersion from "./PlatformVersion";
import { mapGetters, mapActions } from "vuex";

export default {
  name: "RightContent",
  components: {
    AvatarDropdown,
    PlatformVersion,
  },
  props: {
    prefixCls: {
      type: String,
      default: "ant-pro-global-header-index-action",
    },
    isMobile: {
      type: Boolean,
      default: () => false,
    },
    topMenu: {
      type: Boolean,
      required: true,
    },
    theme: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      modalVisible: false,
      showMenu: true,
      showPortalDefined: false,
      currentUser: {},
      fullScreen: false,
      msgCount: 0,
      docUrl: "https://docs.geekera.cn/AiDex-Antdv/",
      githubUrl: "https://github.com/fuzui/AiDex-Antdv",
      customer: {},
      visible: false,
      // path: "ws://127.0.0.1:8091",
      path: "http://47.104.200.227:8092",
      msg: "",
      audio: new Audio(require("@/assets/sound/newcustomer.wav")),
      xiezuaudio: new Audio(require("@/assets/sound/xiezu.wav")),
      onLine: false,
    };
  },
  computed: {
    wrpCls() {
      return {
        "ant-pro-global-header-index-right": true,
        [`ant-pro-global-header-index-${
          this.isMobile || !this.topMenu ? "light" : this.theme
        }`]: true,
      };
    },
    ...mapGetters([
      "userType",
      "portalConfigs",
      "defaultPortal",
      "sysNoticeList",
      "company",
    ]),
  },
  mounted() {
    setTimeout(() => {
      this.currentUser = {
        name: "RuoYi",
      };
    }, 1500);
    this.msgCount = this.sysNoticeList.length;
    this.init();
  },
  created() {
    // setTimeout(() => {
    //   this.$notification.success({
    //     message: "线索通知",
    //     description: `迎回来`,
    //   });
    // }, 1000);
  },
  methods: {
    ...mapActions(["GetCustomerByPhone"]),
    /**
     * 查询用户信息
     */
    handlefindCustomerByPhone(value) {
      if (value) {
        this.GetCustomerByPhone(value).then((res) => {
          console.log("customer", res);
          if (res.data) {
            this.customer = res.data;
            this.visible = true;
          } else {
            this.$message.warning("未查询到数据", 3);
          }
        });
      } else {
        this.$message.warning("请输入电话号码", 3);
      }
    },
    handleCancel() {
      this.visible = false;
    },
    handleOk() {
      this.visible = false;
    },
    showColorSetting() {
      this.$emit("showSetting");
    },
    toConsole() {
      this.$message.success("尚未实现", 3);
    },
    toNotice() {
      this.$router.push({
        path: "/system/notice/NoticeReadIndex",
      });
      this.msgCount = 0;
    },
    toIndex(item) {
      this.$router.push({
        name: "index",
        params: {
          key: item.id,
        },
      });
      if (item.applicationRange === "U") {
        // 当选中小页时用户自定义时，修改选中小页为默认小页
        this.defaultPortal.id = item.id;
      }
      this.$emit("reloadTab", item);
    },
    toDesignIndex(item, type) {
      this.$message.success("尚未实现", 3);
    },
    // 全屏切换
    toggleFullScreen() {
      if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen();
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        }
      }
      this.fullScreen = !this.fullScreen;
    },
    versionInfo() {
      this.modalVisible = true;
      this.$nextTick(() => this.$refs.platformVersionModal.showVersion());
    },
    init: function () {
      if (typeof WebSocket === "undefined") {
        this.$message.error("您的浏览器不支持socket");
      } else {
        // 实例化socket 此处 是登录时存放的 token 和 username
        const userId = this.company.company.id;
        console.log("company", this.company);
        // 拼接 path ： ws://localhost:8866/webSocket/username
        // 如果不需要token验证 则写成
        this.path = this.path.replace("http", "ws");
        this.socket = new WebSocket(this.path + "/websocket/pc/" + userId);
        // 监听socket连接
        this.socket.onopen = this.open;
        // 监听socket错误信息
        this.socket.onerror = this.error;
        // 监听socket消息
        this.socket.onmessage = this.getMessage;
      }
    },
    open: function () {
      console.log("socket连接成功");
    },
    error: function () {
      console.log("连接错误");
      console.log(arguments);
    },
    getMessage: function (msg) {
      console.log("msg", msg);
      var that = this;
      var item = JSON.parse(msg.data);
      var name = "MyIndex";
      if (item.type === "xiezuCus") {
        this.xiezuaudio.play();
        name = "XieZuIndex";
        this.$notification.open({
          message: "消息通知",
          description: item.msg,
          placement: "bottomRight",
          duration: 10,
          icon: function (h) {
            return <a-icon type="message" style="color: #108ee9" />;
          },
          onClick: function () {
            that.$router.push({
              name: name,
            });
          },
          style: "cursor:pointer",
        });
      } else if (item.type === "fenpeiNewCus") {
        this.$notification.open({
          message: "消息通知",
          description: item.msg,
          placement: "bottomRight",
          duration: 10,
          icon: function (h) {
            return <a-icon type="message" style="color: #108ee9" />;
          },
          onClick: function () {
            that.$router.push({
              name: name,
            });
          },
          style: "cursor:pointer",
        });
        this.audio.play();
      } else if (item.type === "onLine") {
        that.onLine = true;
        this.$notification.open({
          message: "消息通知",
          description: "手机APP上线！",
          placement: "bottomRight",
          duration: 10,
          icon: function (h) {
            return <a-icon type="message" style="color: #108ee9" />;
          },
        });
      }
    },
    // 发送消息给被连接的服务端
    send: function (params) {
      this.socket.send(params);
    },
    close: function () {
      console.log("socket已经关闭");
    },
    voicePrompt() {
      this.audio.play();
    },
  },
  destroyed() {
    this.socket.onclose = this.close;
  },
};
</script>
<style lang="less" scoped="scoped">
.ant-pro-global-header {
  .anticon {
    vertical-align: middle;
  }
}
.ant-modal-confirm-content {
  p {
    height: 15px;
  }
}
.setUl {
  .ant-dropdown-menu-item {
    padding: 5px 32px;
    font-size: 12px;
  }
  .ant-dropdown-menu-item > .anticon:first-child {
    font-size: 12px;
  }
  .ant-dropdown-menu-item i {
    position: absolute;
    top: 10px;
    font-size: 12px;
    color: #969696;
  }
  .ant-dropdown-menu-item > a.homeTit {
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
  }
  .menu-operation {
    text-align: center;
    i {
      position: relative;
      top: 0px;
      margin-right: 5px;
    }
  }
  .menu-operation:hover {
    i {
      color: #004ca7;
    }
  }
}
</style>
